import Taro, {useLoad} from '@tarojs/taro'


import {View, Text, ScrollView} from "@tarojs/components";
import {Button, Card, Grid, Image} from "@nutui/nutui-react-taro";
import './index.scss'
import MapService, {ShopLocation} from "@/shared/service/MapService";
import {useState} from "react";
import {HairProduct} from "@/shared/services/model/product";
import productService from "@/shared/services/product/product.service";

export default function Index () {

  const [hairProduct,setHairProduct] = useState<HairProduct[]>([])

  useLoad(async () => {
    console.log('Page loaded.')
    getHairProduct()
  })

  const getHairProduct = async () => {
    const res = await productService.hairProduct({})

    if(res.code == 0){
      setHairProduct(res.data)
    }else{

    }
  }

  const phoneNumber = '19051348099'
// 店铺位置信息
  const shopLocation: ShopLocation = {
    latitude: 31.95,
    longitude: 121.07,
    name: '囍理运男士理发店',
    address: '江苏省南通市通州区川姜镇志南村9组(川叠路与南海路交汇东南角)'
  }
// 打开地图选择
  const openMapSelector = async (): Promise<void> => {
    try {
      await MapService.showMapSelector(
        shopLocation.latitude,
        shopLocation.longitude,
        shopLocation.name,
        shopLocation.address
      )
    } catch (error) {
      console.error('打开地图选择失败:', error)
    }
  }

  // 直接打开系统地图
  const openSystemMap = async (): Promise<void> => {
    try {
      await MapService.openSystemMap(shopLocation)
    } catch (error) {
      console.error('打开系统地图失败:', error)
    }
  }

  const callPhone = async () => {
    try {
      // 可以先确认
      const res = await Taro.showModal({
        title: '提示',
        content: `确定要拨打 ${phoneNumber} 吗？`,
        confirmText: '拨打',
        cancelText: '取消'
      })

      if (res.confirm) {
        await Taro.makePhoneCall({
          phoneNumber: phoneNumber
        })
        console.log('拨打电话成功')
      }
    } catch (error) {
      console.error('取消拨打电话', error)
      Taro.showToast({
        title: '取消拨打电话',
        icon: 'none'
      })
    }
  }
  return <ScrollView
    scrollY
    style={{
      height: 'calc(100vh - 150rpx)', // 减掉顶部高度或者导航栏高度
      backgroundColor: '#f7f7f7'
    }}
    className="scrollview"
  >
    <View className="container">
      <View className={"sec1"}>
        <View className={'bgContainer'}>
          <Image
            className="bg"
            src="https://upload-images.jianshu.io/upload_images/2507704-e4bbe62b2e6e42b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
            fit="cover"
            width="100%"
            height="600px"
          />
          <Image
            className="text"
            src="https://upload-images.jianshu.io/upload_images/2507704-bec781cd9902fb45.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
            fit="ImageFit"
            width="200px"
            height="97px"
          />
        </View>
      </View>
      {/* 这是新的内容区 */}
      <View className="sec2">
        <View className="iconRow">
          <View className="iconItem">
            <View className="iconBg">
            <Image src={require('@/assets/icon_mojing.png')} className="icon" />
            </View>
            <Text className={'title'}>囍理运</Text>
            <Text className={'desc'}>XiLiYun</Text>
          </View>
          <View className="iconItem">
            <View className="iconBg">
              <Image src={require('@/assets/icon_vip.png')} className="icon" />
            </View>
            <Text className={'title'}>PLUS会员</Text>
            <Text className={'desc'}>Members</Text>
          </View>
          <View className="iconItem">
            <View className="iconBg">
              <Image src={require('@/assets/icon_team.png')} className="icon" />
            </View>
            <Text className={'title'}>技术团队</Text>
            <Text className={'desc'}>Hair stylist</Text>
          </View>
          <View className="iconItem">
            <View className="iconBg">
              <Image src={require('@/assets/icon_women.png')} className="icon" />
            </View>
            <Text className={'title'}>烫发染发</Text>
            <Text className={'desc'}>Perm dyeing</Text>
          </View>
          <View className="iconItem">
            <View className="iconBg">
              <Image src={require('@/assets/icon_shuazi.png')} className="icon" />
            </View>
            <Text className={'title'}>造型品</Text>
            <Text className={'desc'}>Modeling</Text>
          </View>
        </View>

        {/* 卡片列表区域 */}
        <View className="card-list-section">
          <Text className="section-title">热门服务</Text>
          <View className="cards-container">
            {hairProduct.map(service => (
              <View key={service.id} className="service-card">
                <Image className="cover" src={service.image} mode='aspectFill'/>
                <View className="card-content">
                  <Text className="card-title">{service.itemName}</Text>
                  <View className="price-container">
                    <Text className="card-rmb">¥</Text>
                    <Text className="card-price">{service.price}</Text>
                    {service.vipPrice && service.vipPrice != 0 ? (
                      <>
                        <Text className="card-vip">会员价</Text>
                        <Text className="card-vip-rmb">¥</Text>
                        <Text className="card-vip-price">{service.vipPrice}</Text>
                      </>
                    ) : null}
                  </View>

                  {/*<View className="price-vip-container">*/}

                  {/*</View>*/}

                </View>
              </View>
            ))}
          </View>
        </View>

        <View className={'contact'}>
          <Text className="contact-title">预约电话</Text>
          <View className="contact-btn" onClick={callPhone}>
            190 5134 8099
          </View>

          <Text className="contact-address">店铺地址</Text>
          <Text className="contact-address-info" onClick={openSystemMap}>江苏省南通市通州区川姜镇志南村9组(川叠路与南海路交汇东南角)</Text>
        </View>
      </View>
    </View>
  </ScrollView>
}
